<template>
    <div ref="editor">
    </div>
</template>
<script>
   let monaco=require('vs/editor/editor.main');
    export default {
        props:{
            language:{
                default:'javascript'
            },
            value:{
              default:' '
            },
            options:{
                default:function () {
                    return {
                        automaticLayout:true
                    }
                }
            }
        },
        data(){
            return {
               editor:null
            }
        },
        watch:{
            value(nv,ov) {
                if(this.editor){
                    this.editor.getModel().setValue(nv);
                }
            }
        },
        mounted(){
            let language=this.language;
            if(language=='nginx'){
                require(['js/vs/language/nginx/nginx.js'],(r)=>{
                    r.register(monaco);
                    this.initEditor()
                })
            }else{
                this.initEditor()
            }
            //load(['vs/editor/editor.main'],(monaco)=>{

           // })
        },methods:{
            initEditor(){
                let opt= this.options;
                opt.value=this.value;
                opt.language=this.language
                this.editor = monaco.editor.create(this.$refs.editor,opt);
                this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, (v)=> {
                    this.$emit("save",this.editor.getValue())
                })
            },
            save(){
               // this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, (v)=> {
                    this.$emit("save",this.editor.getValue())
               // })
            }
        }
    }
</script>
